<template>
	<view>
		<!-- <view id="kong"></view> -->
		<view id="mynav">
			<view :class="sel=='待办'?'active':''"><text  @click="changesel('待办')">待办</text></view>
			<view :class="sel=='已办'?'active':''"><text  @click="changesel('已办')">已办</text></view>
		</view>
		<view id="con" :style="{height:screenHeight+'px'}">
			<view v-for="(item,index) in pagedata" class="con-main" @click="skip(item)">
				<view><text>{{item.name}}发起的{{item.mytype}}申请</text></view>
				<view><text>{{item.department_name}}-{{item.post_name}}</text></view>
				<view><text>{{item.mytime}}</text></view>
				<view><text>直接领导审核</text></view>
				<view v-if="item.agree" :class="item.agree=='同意'?'agree':'disagress'"><text>{{item.agree}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js'
	import store from '~@/store/index.js'
	import {
		computed,
		reactive,
		toRefs,onMounted
	} from 'vue'
	export default {
		setup() {
			let data = reactive({
				sel: "待办",
				search:"待审核",
				screenHeight:"",
				pagedata:[],
				changesel:(sel)=>{
					data.sel=sel
					if(data.sel=='待办'){
						data.search="待审核"
					}else{
						data.search="已审核"
					}
					store.commit('zengjiayu/setTodostate',sel)
					data.pagedata=[]
					data.getdata()
				},
				skip:(x)=>{
					uni.navigateTo({
						url:'../todo_details/todo_details'
					})
					store.commit('zengjiayu/setTododata', x)
				},
				getdata:()=>{
					console.log(store.state.liujinchang.user)
					data.pagedata=[]
					http({
						url:'/Personalcenter/todo/getone',
						data:{
							mytype:data.search,
							jobs:store.state.liujinchang.user.jobs
						}
					}).then((res)=>{
						console.log('成功')
						 res.data.data.forEach((v, i) => {
						    v.mytime = v.applytime;
						    v.mytype = v.type;
						    data.pagedata.push(v);
						});
					})
					http({
						url:'/Personalcenter/todo/gettwo',
						data:{
							mytype:data.search,
							jobs:store.state.liujinchang.user.jobs
						}
					}).then((res)=>{
						res.data.data.forEach((v, i) => {
						    v.mytime = v.meeting_todotime;
						    v.mytype = "会议";
						    data.pagedata.push(v);
						});
					})
				}
			})
			// onMounted(()=>{
			// 	data.screenHeight=uni.getSystemInfoSync().scrollHeight
			// 	data.getdata();
			// })
			return {
				...toRefs(data)
			}
			
		},
		onLoad(){
			this.pagedata=[]
			this.screenHeight=uni.getSystemInfoSync().scrollHeight
			this.getdata();
			console.log('lalal')
		}
	}
</script>

<style lang="less">
	// #kong{
	// 	background-color:#F2F2F2 ;
	// 	height: 50rpx;
	// }
	#mynav{
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		// top: 0;
		z-index: 1;
		width: 750rpx;
		background-color: #FFF;
		view{
			width: 250rpx;
			text-align: center;
		}
	}
	.active {
		padding: 24rpx 0;
		color: #2D8CF0;
		border-bottom: 1px solid #2D8CF0;
		box-sizing: border-box;
	}
	#con{
		background-color: #F2F2F2;
		padding-top: 2rpx;
	}
	#con>view{
		margin: 24rpx 24rpx;
		background-color:#FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
		font-size:12px ;
	}
	.con-main{
		position: relative;
		overflow: hidden;
	}
	.con-main>view{
		margin: 16rpx 0;
	}
	.con-main>view:nth-of-type(1){
		font-size:16px ;
	}
	.con-main>view:nth-of-type(2),.con-main>view:nth-of-type(3){
		color: #929292;
	}
	.con-main>view:nth-of-type(4){
		margin: 10rpx 0;
	}
	.con-main>view:nth-of-type(4)>text{
		padding: 8rpx;
		color: #2D8CF0;
		border-radius: 5px;
		background-color: #EAF4FE;
	}
	.con-main>view:nth-of-type(5){
		position: absolute;
		top: -18px;
		line-height: 110rpx;
		right: 40rpx;
		text-align: center;
		border-radius: 0 0  50px 50px;
		color: #FFFFFF;
		width: 90rpx;
		height: 90rpx;
	}
	.agree{
		background-color: #73B2F5;
	}
	.disagress{
		background-color: #FFBA55;
	}
</style>
